<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body,p {
            margin:0;
            padding: 0;
        }
        div {
            background: pink;
        }
        p {
            height: 30px;
        }
        button {
            border:0;
            height:21px;
            padding:0;
        }
    </style>
</head>
<body>
    
    <div>
        <p>1</p>
        <p id="p2">2</p>
        <p>3</p>
        <button>123</button>
    </div>

    <script src="http://www.jq22.com/jquery/1.4.4/jquery.min.js"></script>
    <script>
       let offsetObj =  $('#p2').offset();
    //   console.log(offsetObj);   // top:129
    // 元素自身的高度
      console.log($('#p2').innerHeight());
      // 包含外边距
      console.log($('#p2').outerHeight());




    let btn = $('button').get(0);
    // console.log(btn.offsetTop);  // 129
    // console.log(btn.offsetHeight);  //  自身的高度
    // console.log(btn.offsetParent); 

    </script>

</body>
</html>